<template>
	<el-button type="primary" plain @click="addClick">新增</el-button>
	<el-table :data="state.tableData" style="width: 100%">
		<el-table-column prop="type" label="图书类型" />
		<el-table-column prop="name" label="图书名称" />
		<el-table-column prop="description" label="描述" />

		<el-table-column fixed="right" label="操作" width="180">
			<template #default="{ row }">
				<el-button type="danger" size="small" @click="delClick(row)">删除</el-button>
				<el-button type="primary" size="small" @click="editClick(row)">修改</el-button>
			</template>
		</el-table-column>
	</el-table>

	<Dialog
		:fromData="state.formData"
		:dialogVisible="state.dialogVisible"
		:clickType="state.clickType"
		@submit="submit"
		@close="state.dialogVisible = false" />
</template>

<script lang="ts">
	import { defineComponent, onBeforeMount, reactive } from 'vue'
	import { ItableData } from '@/types/index'
	import { getBooks, addBooks, editBooks, delBooks } from '@/api'
	import Dialog from './components/Dialog.vue'
	import { ElMessage, ElMessageBox } from 'element-plus'

	export default defineComponent({
		name: 'TestPage1',
		components: { Dialog },

		setup() {
			// 定义数据状态的类型限制接口
			interface IState {
				formData: ItableData
				tableData: Array<ItableData>
				dialogVisible: boolean
				clickType: string
			}

			const state: IState = reactive({
				formData: { name: '', type: '', description: '' },
				tableData: [],
				dialogVisible: false,
				clickType: ''
			})

			// 页面挂载前调用接口获取数据
			onBeforeMount(() => {
				getTableData()
			})

			// 调用接口获取列表数据
			const getTableData = async () => {
				const res = await getBooks<ItableData[]>()
				state.tableData = res.data
			}

			// 新增按钮
			const addClick = () => {
				state.clickType = 'add'
				state.formData = { name: '', type: '', description: '' }
				state.dialogVisible = true
			}

			// 修改按钮
			const editClick = (row: ItableData) => {
				state.clickType = 'edit'
				state.formData = { ...row }
				state.dialogVisible = true
			}

			// 提交事件
			const submit = async () => {
				let res = null
				if (state.clickType === 'add') {
					res = await addBooks<ItableData>(state.formData)
				} else if (state.clickType === 'edit') {
					res = await editBooks<ItableData>(state.formData)
				}
				if (res?.data) {
					getTableData()
					state.dialogVisible = false
				} else {
					ElMessage({
						type: 'error',
						message: res?.msg
					})
				}
			}

			const delClick = (row: ItableData) => {
				ElMessageBox.confirm('是否确认删除', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(async () => {
						const res = await delBooks<ItableData>(Number(row.id))
						if (res.data) {
							ElMessage({
								type: 'success',
								message: res.msg
							})

							getTableData()
						} else {
							ElMessage({
								type: 'error',
								message: res.msg
							})
						}
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '取消操作'
						})
					})
			}

			return {
				state,
				addClick,
				editClick,
				submit,
				delClick
			}
		}
	})
</script>
